<template>
  <div class="check-wrap">
    <div class="search-bar">
      <span class="search-title">审阅名称</span>
      <a-input
        v-model="searchParams.name"
        placeholder="请输入名称查询"
        style="width: 196px; margin-left: 24px"
        @keydown.enter="getList"
      ></a-input>
    </div>
    <div class="content">
      <div class="content-title">
        <div>
          <img
            src="@/assets/images/dashboard/dec@2x.png"
            class="title-img"
            alt=""
          />
          <span class="title-text">审阅</span>
        </div>
        <div class="btns">
          <a-button size="small" @click="createProcessDialogVisible = true"
            >添加流程模版</a-button
          >
          <a-button
            type="primary"
            size="small"
            style="margin-left: 6px"
            @click="createDialogVisible = true"
            >添加审阅</a-button
          >
        </div>
      </div>
      <div class="table-wrap">
        <a-table
          :data="checkList"
          stripe
          :scroll="{ x: '100%', y: '100%' }"
          :pagination="pageConfig"
          @page-change="pageChange"
          @page-size-change="pageSizeChange"
        >
          <template #columns>
            <a-table-column title="序号" align="center">
              <template #cell="{ rowIndex }">
                {{
                  (pageConfig.pageSize ? pageConfig.pageSize : 10) *
                    ((pageConfig.current ? pageConfig.current : 1) - 1) +
                  (rowIndex + 1)
                }}
              </template>
            </a-table-column>
            <a-table-column title="审阅名称" align="center">
              <template #cell="{ record }">
                <span
                  style="color: blue; cursor: pointer"
                  @click="clickRow(record)"
                  >{{ record.name }}</span
                >
              </template>
            </a-table-column>
            <a-table-column
              title="ID"
              data-index="id"
              align="center"
            ></a-table-column>
            <a-table-column
              title="流程状态"
              data-index="processState"
              align="center"
            >
              <template #cell="{ record }">
                <div class="">
                  <a-tag
                    v-if="Number(record.processState) === 0"
                    checkable
                    color="orange"
                    :default-checked="true"
                    >审批中</a-tag
                  >
                  <a-tag
                    v-if="Number(record.processState) === 1"
                    checkable
                    color="green"
                    :default-checked="true"
                    >审批通过</a-tag
                  >
                  <a-tag
                    v-if="Number(record.processState) === 2"
                    checkable
                    color="red"
                    :default-checked="true"
                    >审批不通过</a-tag
                  >
                </div>
              </template>
            </a-table-column>
            <a-table-column
              title="流程模版"
              data-index="processName"
              align="center"
            ></a-table-column>
            <a-table-column
              title="发起人"
              data-index="createName"
              align="center"
            ></a-table-column>
            <a-table-column
              title="创建时间"
              data-index="createDate"
              align="center"
            ></a-table-column>
            <a-table-column
              title="文件数"
              data-index="fileCount"
              align="center"
            ></a-table-column>
          </template>
        </a-table>
      </div>
    </div>
    <div class="components">
      <CreateCheck
        v-model:visible="createDialogVisible"
        @submit="getList"
      ></CreateCheck>
      <CreateProcess
        v-model:visible="createProcessDialogVisible"
      ></CreateProcess>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed, onMounted, reactive, ref } from 'vue';
  import { PaginationProps } from '@arco-design/web-vue';
  import { useRoute } from 'vue-router';
  import { useGlobalModeStore } from '@/store';
  import CreateProcess from '@/views/project-setting/process/create-process.vue';
  import CreateCheck from './components/create-check/create-check.vue';
  import { getCheckList } from './api';

  const route = useRoute();
  const globalModeStore = useGlobalModeStore();
  const globalMode = computed(() => {
    return globalModeStore.getGlobalMode;
  });

  const searchParams = reactive({
    name: '',
  });

  const checkList = ref<object[]>([]);
  const pageConfig: PaginationProps = reactive({
    showTotal: true,
    showMore: true,
    showJumper: true,
    showPageSize: true,
    current: 1,
    pageSize: 10,
    total: 100,
  });
  const getList = () => {
    const params = {
      pageNo: pageConfig.current || 1,
      pageSize: pageConfig.pageSize || 10,
      name: searchParams.name || '',
      projectId: route.params.projectId,
    };
    getCheckList(params)
      .then((res: any) => {
        if (res.code === 8000000) {
          checkList.value = res.data.list || [];
          pageConfig.total = res.data.total || checkList.value.length || 0;
        }
      })
      .catch((e) => {
        if (e) {
          checkList.value = [];
        }
      });
  };
  const clickRow = (row: any) => {};
  const pageSizeChange = (size: number): void => {
    pageConfig.pageSize = size;
    getList();
  };
  const pageChange = (current: number): void => {
    pageConfig.current = current;
    getList();
  };

  const createDialogVisible = ref(false);
  const createProcessDialogVisible = ref(false);
  onMounted(() => {
    getList();
  });
</script>

<style scoped lang="less">
  .check-wrap {
    padding-left: 43px;
    padding-right: 43px;
  }
  .search-bar {
    padding-top: 36px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-border);
  }
  .search-title {
    display: inline-block;
    width: 60px;
    height: 22px;
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN, serif;
    font-weight: 600;
    color: #000000;
    line-height: 22px;
  }
  .search-bar {
    margin-top: 8px;
  }
  .content {
    margin-top: 24px;
    .content-title {
      margin-top: 16px;
      //height: 25px;
      position: relative;
      //border: 1px solid red;
      .btns {
        position: absolute;
        right: 0px;
        top: 0px;
      }
      .title-img {
        height: 20px;
        width: 20px;
      }
      .title-text {
        display: inline-block;
        margin-left: 8px;
        font-size: 18px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN, serif;
        font-weight: 600;
        color: #1d2129;
        line-height: 21px;
        position: absolute;
        left: 20px;
        top: 0px;
      }
    }
    .table-wrap {
      margin-top: 18px;
      height: calc(100vh - 250px);
    }
  }
</style>
